import { AntDesignTheme } from '@amcax/base';
import { ConfigProvider, Spin } from 'antd';
import { createRoot } from 'react-dom/client';
import styled from 'styled-components';

export const StyledLayout = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
`;
export default function ShowLoading() {
  const mountNode = document.body;
  const div = document.createElement('div');
  mountNode.appendChild(div);
  const root = createRoot(div);

  root.render(
    // 因为这个是直接添加到body，所以需要使用ConfigProvider，保持样式统一
    <ConfigProvider theme={AntDesignTheme}>
      <StyledLayout>
        <Spin tip='Loading...'>
          <div className='content' />
        </Spin>
      </StyledLayout>
    </ConfigProvider>,
  );

  return () => {
    root.unmount();
    div.parentNode.removeChild(div);
  };
}
